import React, { useEffect } from "react";
import { modalPropsType } from "@/constants/types";
import { Modal, Form, Row, Col, InputNumber, Input } from "antd";
import XlTableDictColumn from "@/components/Table/XlTableDictColumn";
import { isUps } from "@/utils/dictUtil";

const {Item} = Form;
const rules = [{required: true}];

const LineQuoteUpdate = ({visible, title, currentRow, loading, onCancel, onSubmit}: modalPropsType) => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      ...res,
      id: currentRow?.id,
    });
  }

  useEffect(() => {
    if (currentRow) {
      form.setFieldsValue({...currentRow});
    }
  }, [JSON.stringify(currentRow)])

  return (
    <Modal
      width="850px"
      title={title}
      maskClosable={false}
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      confirmLoading={loading}
    >
      <Form form={form}>
        <Row gutter={10} style={{paddingLeft: 30}}>
          <Col span={5}>
            <Item label="年份" style={{marginBottom: '0'}}>
              <span>{currentRow?.year}</span>
            </Item>
          </Col>
          <Col span={5}>
            <Item label="周次" style={{marginBottom: '0'}}>
              <span>{currentRow?.week}</span>
            </Item>
          </Col>
          <Col span={5}>
            <Item label="国家" style={{marginBottom: '0'}}>
              <span>{currentRow?.countryName}</span>
            </Item>
          </Col>
          <Col span={5}>
            <Item label="产品" style={{marginBottom: '0'}}>
              <span>{currentRow?.productName}</span>
            </Item>
          </Col>
        </Row>
        <Row gutter={10} style={{paddingLeft: 30}}>
          <Col span={5}>
            <Item label="起始地" style={{marginBottom: '10px'}}>
              <span>{currentRow?.sportName}</span>
            </Item>
          </Col>
          <Col span={5}>
            <Item label="目的港" style={{marginBottom: '10px'}}>
              <span>{currentRow?.dportName}</span>
            </Item>
          </Col>
          <Col span={5}>
            <Item label="目的地" style={{marginBottom: '10px'}}>
              <span>{currentRow?.destCode}</span>
            </Item>
          </Col>
          <Col span={5}>
            <Item label="拼箱方式" style={{marginBottom: '10px'}}>
              <XlTableDictColumn type="groupType" value={currentRow?.groupType} />
            </Item>
          </Col>
          <Col span={4}>
            <Item label="派送方式" style={{marginBottom: '10px'}}>
              <XlTableDictColumn type="deliveryMethod" value={currentRow?.['deliveryMethod']} />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item labelCol={{span: 7}} label="卖价/CBM" name="cbmPrice" rules={isUps(currentRow?.deliveryMethod) ? undefined : rules} style={{marginBottom: '10px'}}>
              <InputNumber style={{width: 200}} />
            </Item>
          </Col>
          <Col span={12}>
            <Item labelCol={{span: 7}} label="卖价/KGS" name="kgsPrice" rules={rules} style={{marginBottom: '10px'}}>
              <InputNumber style={{width: 200}} />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item labelCol={{span: 7}} label="赔付价/CBM" name="lowestCbmPrice" rules={isUps(currentRow?.deliveryMethod) ? undefined : rules} style={{marginBottom: '10px'}}>
              <InputNumber style={{width: 200}} />
            </Item>
          </Col>
          <Col span={12}>
            <Item labelCol={{span: 7}} label="赔付价/KGS" name="lowestKgsPrice" rules={rules} style={{marginBottom: '10px'}}>
              <InputNumber style={{width: 200}} />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item labelCol={{span: 7}} label="最低起收/CBM" name="minTakeCbm" rules={isUps(currentRow?.deliveryMethod) ? undefined : rules} style={{marginBottom: '10px'}}>
              <InputNumber style={{width: 200}} />
            </Item>
          </Col>
          <Col span={12}>
            <Item labelCol={{span: 7}} label="最低起收/KGS" name="minTakeKgs" rules={rules} style={{marginBottom: '10px'}}>
              <InputNumber style={{width: 200}} />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item labelCol={{span: 7}} label="赔付时效" name="failTimeliness" style={{marginBottom: '10px'}}>
              <InputNumber style={{width: 200}} />
            </Item>
          </Col>
          <Col span={12}>
            <Item labelCol={{span: 7}} label="参考时效" name="referenceTimeliness" rules={rules} style={{marginBottom: '10px'}}>
              <Input placeholder="例如: 10-20天" style={{width: 200}} />
            </Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}
export default LineQuoteUpdate;